<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>photoWall</title>
    <style>
        :root,
        body {
            height: 100%;
        }

        body {
            perspective: 2000px;
            transform-style: preserve-3d;
        }

        @keyframes round {
            0% {
                transform: rotateY(0deg)
            }

            100% {
                transform: rotateY(360deg)
            }
        }

        .wrapper {
            position: absolute;
            left: calc(50% - 100px);
            top: 150px;
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            animation: round 8s linear infinite;
        }

        img {
            position: absolute;
            width: 200px;
            height: 300px;
        }

        img:nth-of-type(1) {
            transform: rotateY(36deg) translateZ(400px) translateY(0px);
        }

        img:nth-of-type(2) {
            transform: rotateY(72deg) translateZ(400px) translateY(50px);
        }

        img:nth-of-type(3) {
            transform: rotateY(108deg) translateZ(400px) translateY(100px);
        }

        img:nth-of-type(4) {
            transform: rotateY(144deg) translateZ(400px) translateY(150px);
        }

        img:nth-of-type(5) {
            transform: rotateY(180deg) translateZ(400px) translateY(200px);
        }

        img:nth-of-type(6) {
            transform: rotateY(216deg) translateZ(400px) translateY(250px);
        }

        img:nth-of-type(7) {
            transform: rotateY(252deg) translateZ(400px) translateY(300px);
        }

        img:nth-of-type(8) {
            transform: rotateY(288deg) translateZ(400px) translateY(350px);
        }

        img:nth-of-type(9) {
            transform: rotateY(324deg) translateZ(400px) translateY(400px);
        }

        img:nth-of-type(10) {
            transform: rotateY(360deg) translateZ(400px) translateY(450px);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img src="./img/1.jpeg">
        <img src="./img/2.jpg">
        <img src="./img/3.jpeg">
        <img src="./img/4.jpg">
        <img src="./img/5.jpg">
        <img src="./img/6.png">
        <img src="./img/7.jpg">
        <img src="./img/8.jpg">
        <img src="./img/9.png">
        <img src="./img/10.jpg">
    </div>
    <script>
        // 移动视角
        document.body.onmousemove = function (e) {
            this.style.perspectiveOrigin = '' + e.pageX + 'px ' + e.pageY + 'px';
        }

        document.getElementsByClassName('wrapper')[0].onmouseover = function (e) {
            document.getElementsByClassName('wrapper')[0].style.animationPlayState = 'paused';
        }
        document.getElementsByClassName('wrapper')[0].onmouseout = function (e) {
            document.getElementsByClassName('wrapper')[0].style.animationPlayState = 'running';
        }


    </script>
</body>

</html>